import React, { Component } from 'react';

import MySwiper from '../../components/MySwiper';
import MyHeader from '../../components/MyHeader';
import MyEntry from '../../components/MyEntry';
import MySecKill from '../../components/MySecKill';
import { index_banner } from '../../api/index'



class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bannerlist: []
        }
    }
    toSearch() {
        // 以下这些跳路由的方式都可以称为"编程式导航"
        // this.props.history.push('/search');//跳路由
        // this.props.history.go(-1);//返回上一个路由
        // this.props.history.goBack();//返回上一个路由
        // this.props.history.goForward();//前进一个路由
        // this.props.history.replace('/search');//替换当前路由

        // this.props.history.push('/search/'+666);//跳动态路由
        // this.props.history.push({ pathname:'/search',query:{ id:1234 } });//跳路由传参
        this.props.history.push({ pathname: '/search', state: { id: 1234 } });//跳路由传参

    }
    async componentDidMount() {
        var res = await index_banner();
        if (res.data.code == 200) {
            this.setState({ bannerlist: res.data.list })
        }
    }
    render() {
        //当一个组件是通过匹配路由规则 渲染出来的, 这样的组件props中默认会自动添加三个路由相关的对象:
        //history,location,match
        //当一个组件不是通过匹配路由规则 渲染出来的, 这样的组件props中默认是{}

        //history 主要负责跳路由
        //location 主要负责获取路由相关参数
        //match 主要负责获取路由相关参数

        return (
            <div className='home'>
                {/* 头部导航 */}
                <MyHeader />
                {/* 轮播图 */}
                <MySwiper swiperlist={this.state.bannerlist} />
                {/* 分类导航 */}
                <MyEntry />
                {/* 首页推荐列表区域 */}
                <MySecKill />
            </div>
        );
    }
}

export default Home;